<template>
  <div class="search-bar">
    <!-- show search button in keybord -->
    <form action onsubmit="return false;">
      <mu-flexbox :gutter="0">
        <mu-flexbox-item grow="5">
          <input
            class="search-input mu-text-field-input"
            type="search"
            :placeholder="placeholder"
            v-model="inputValue"
            @search="handleSearch"
            ref="input1"
          >
        </mu-flexbox-item>
        <!-- <mu-flexbox-item grow="1">
            <i class="iconfont icon-ssousuo" v-if="!inputValue" @click="handleSearch"></i>
            <i class="iconfont icon-close" @click="handleClose" v-else></i>
        </mu-flexbox-item>-->
      </mu-flexbox>
      
    </form>
    <mu-flexbox :gutter="0" style="margin-top:3em;">
        <mu-flexbox-item grow="3"></mu-flexbox-item>
        <mu-flexbox-item grow="12 ">
          <mu-raised-button class="submit-btn" label="查询" @click="handleSearch" fullWidth primary></mu-raised-button>
        </mu-flexbox-item>
        <mu-flexbox-item grow="3"></mu-flexbox-item>
      </mu-flexbox>
  </div>
</template>

<script>
export default {
  name: "search-bar",
  props: {
    placeholder: {
      type: String,
      default: "搜索科室或医生"
    },
    defaultValue: ""
  },
  watch: {
    defaultValue(v) {
      this.inputValue = v;
    }
  },
  data() {
    return {
      inputValue: "",
      timer: null
    };
  },
  methods: {
    handleSearch() {
      this.$refs.input1.blur();
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.$emit("search", this.inputValue);
      }, 200);
    },
    handleClose() {
      this.inputValue = "";
      this.$emit("search", this.inputValue);
    },
    clearValue() {
      this.inputValue = "";
    }
  }
};
</script>

<style lang="less" scoped>
.search-bar {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  // margin:.5em .6em;
  // background: #fff;
  .search-input {
    border: 1px solid #fff;
    padding: 0.6em 1em;
    display: block;
    width: 100%;
    box-shadow: 0;
    background: #fff;
  }
  .icon-ssousuo,
  .icon-close {
    color: #ccc;
    position: absolute;
    right: 1em;
    top: 0.3em;
    background: #fff;
    cursor: pointer;
    display: block;
  }
}
</style>
